<template>
  <div class="youxue-password-input relative" @click="inputFocus">
    <!-- 隐藏的输入框 -->
    <input
      class="input"
      type="number"
      :pattern="isUni ? '' : '\d*'"
      :password="isPassword"
      :maxlength="length"
      :focus="focused"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      :value="value"
    />

    <!-- 输入框列表 -->
    <ul class="input-list box box-between">
      <li
        class="item border"
        :class="{ active: index == value.length && focused }"
        :style="{ width: (10 / length) * 10 + '%', height: itemHeight + 'px' }"
        v-for="(item, index) in length"
        :key="index"
      >
        <input
          style="width: 100%; height: 100%;"
          class="text-center"
          :password="isPassword"
          disabled
          :value="value[index]"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "youxue-password-input",

  model: {
    name: "value",
    event: "input",
  },

  props: {
    // 值
    value: {
      type: String,
      default: "",
    },

    // 密码长度
    length: {
      type: Number,
      default: 6,
    },

    // 是否是密码
    isPassword: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      itemHeight: "",
      focused: false,
      isUni: typeof uni != "undefined",
    };
  },

  mounted() {
    // 动态设置高度
    this.$nextTick(() => {
      if (this.isUni) {
        uni
          .createSelectorQuery()
          .in(this)
          .selectAll(".input-list .item")
          .boundingClientRect((rect) => {
            this.itemHeight = rect[0].width;
          })
          .exec();
      } else {
        this.itemHeight = document.querySelector(
          ".input-list .item"
        ).offsetWidth;
      }
    });

    this.$emit("input", "");
  },

  methods: {
    /**
     * 输入回调
     */
    onInput(event) {
      let value = "";

      if (this.isUni) {
        value = event.detail.value;
      } else {
        value = document.querySelector(".youxue-password-input .input").value;
      }

      this.$emit("input", value);
      console.log("正在输入：", value);

      // 输入完毕
      if (value.length >= this.length) {
        if (this.isUni) this.focused = false;
        else document.querySelector(".youxue-password-input .input").blur();
        this.$emit("complete", value);
      }
    },

    /**
     * 让输入框聚焦
     */
    inputFocus() {
      if (this.isUni) this.focused = true;
      else document.querySelector(".youxue-password-input .input").focus();
    },

    onFocus() {
      this.focused = true;
      this.$emit("focus");
    },

    onBlur() {
      this.focused = false;
      this.$emit("blur");
    },
  },

  install(Vue) {
    Vue.component(this.name, this);
  },
};
</script>

<style lang="scss" scoped>
.youxue-password-input {
  position: relative;

  input {
    border: none;
    background-color: transparent;
  }

  & > .input {
    position: fixed;
    top: 0;
    left: 0;
    height: 0px !important;
    opacity: 0 !important;
  }

  .input-list {
    .item {
      max-width: 45px;
      max-width: 90rpx;
      max-height: 45px;
      max-height: 90rpx;

      &.active {
        border-color: $color-main;
        transition: all 0.2s ease-in-out;
      }

      &:not(:last-child) {
        margin-right: 10px;
        margin-right: 20rpx;
      }
    }
  }

  .border {
    border: none;
    border-bottom: 1px solid #999;
  }
}
</style>
